<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		watch,
		nextTick
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		orderStore,
		orderMsg
	} from '@/stores'

	const store = orderStore()
	const msgStore = orderMsg()

	const index = ref(0) //存储路由传递的index
	const status = ref('') //存储路由传递的status
	// 状态控制
	const isShow = ref(false) // 司机接单状态
	const isPay = ref(false) // 支付状态
	const isOk = ref(false) // 订单完成状态
	const isCancle = ref(false) // 订单取消状态
	const timer = ref(null) // 定时器

	const currentOrder = computed(() => msgStore.currentOrder)
	const timeStore = computed(() => {
		if (!currentOrder.value) return '请选择时间'
		return `${currentOrder.value.time || ''},${currentOrder.value.way || ''}${currentOrder.value.store || ''}人`
	})
	//返回上一页
	const back = () => {
		if (!status.value) {
			uni.switchTab({
				url: '/pages/home/home'
			})
		} else {
			uni.navigateBack({
				delta: 1
			})
		}
	}
	//跳转取消订单页面
	const cancelOrder = () => {
		uni.navigateTo({
			url: `/pages/order/cancelOrder?id=${currentOrder.value.id}&index=${index.value}`
		})
	}
	//分配司机
	const randomDriver = () => {
		isShow.value = true
	}
	//支付车费
	const goPay = () => {
		isPay.value = true
		if (timeout) clearTimeout(timeout)
		const timeout = setTimeout(() => {
			isOk.value = true
		}, 5000)
	}
	//一键报警
	const callPolice = () => {
		uni.showToast({
			title: '已报警'
		})
	}
	const initOrderData = (index, item) => {
		if (index !== undefined) {
			const order = store.orderList[index]
			msgStore.setCurrentOrder(order)
		}
	}
	const initOrderStatus = () => {
		if (status.value === "等待司机接单") {
			timer.value = setTimeout(randomDriver, 5000)
		} else if (status.value === "司机已接单") {
			isShow.value = true
		} else if (status.value === "已完成") {
			isPay.value = true
			isOk.value = true
		} else if (status.value === "已取消") {
			isOk.value = true
			isCancle.value = true
			isShow.value = false
		}
	}
	onLoad((options) => {
		index.value = options.index
		status.value = options.status
		initOrderData(options.index)
	})
	onMounted(() => {
		if (status.value) {
			initOrderStatus()
		} else if (currentOrder.value.status === "等待司机接单") {
			timer.value = setTimeout(randomDriver, 5000)
		}
	})
	onUnmounted(() => {
		clearTimeout(timer.value)
	})
	//订单状态
	const statusText = computed(() => {
		return isCancle.value ? "已取消" : isOk.value ? "已完成" : isShow.value ? "司机已接单" : "等待司机接单"
	})
	//系统语言
	const systemText = computed(() => {
		return isCancle.value ? currentOrder.value.reason : isOk.value ? "感谢您的信任和支持" : isShow.value ? "请及时支付车费" :
			"系统正在为你邀请司机接单"
	})
	watch(statusText, (newVal) => {
		store.updateOrderStatus(index.value, newVal)
	}, {
		deep: true,
		immediate: true
	})
</script>

<template>
	<uni-nav-bar dark :fixed="true" background-color="#03bf5f" status-bar left-icon="left" title="订单详情"
		@clickLeft="back" />
	<template>
		<view class="orderDetail">
			<view class="state">
				<view class="title">
					<text>{{statusText}}</text>
					<view class="part" v-if="isShow">
						<text class="isPay" v-if="isPay">已支付</text>
						<text class="mark">￥</text>
						<text class="money">{{currentOrder.totalPrice || 888}}</text>
					</view>
				</view>
				<text class="system">{{systemText}}</text>
				<view class="tips cab" v-if="!isOk">
					<my-imagetext class="tip" imgurl="/static/images/my.png" text="请务必线上支付，线下支付易造成损失，平台概不负责！" />
				</view>
				<view class="tips" v-else>
					<image src="/static/images/my.png" />
					<view class="driverCar">
						<text class="driverName">严师傅</text>
						<text class="driver">闽E8992Y 日产轩逸</text>
					</view>
				</view>
			</view>
			<view class="driverMessage" v-if="isShow&&!isOk">
				<view class="driverMes">
					<view class="msg">
						<image src="/static/images/my.png" />
						<view>
							<text class="driverName">严师傅</text>
							<text class="driver">闽E8992Y 日产轩逸</text>
						</view>
					</view>
					<image src="/static/images/my_f.png" class="phone" />
				</view>
				<view class="divider"></view>
				<view class="location">
					<my-imagetext imgurl="/static/images/my.png" text="醇醚酯化工清洁生产国家工程实验室"></my-imagetext>
					<text>查看位置</text>
				</view>
			</view>
			<view class="detail">
				<my-imagetext class="time" imgurl="/static/images/my.png" :text="timeStore" />
				<view class="divider"></view>
				<view class="distance">
					<my-imagetext class="address" imgurl="/static/images/my.png" :text="currentOrder.startAddress" />
					<my-imagetext class="address" imgurl="/static/images/my.png" :text="currentOrder.endAddress" />
				</view>
				<view class="divider"></view>
				<view class="handle">
					<my-imagetext @click="cancelOrder" class="cancel" imgurl="/static/images/my.png" text="取消订单"
						v-if="!isOk" />
					<my-imagetext class="call" imgurl="/static/images/my.png" text="联系客服" />
				</view>
			</view>
			<view class="know">
				<text class="caption">乘客需知</text>
				<text class="content" v-for="(item,index) in 6"
					:key="index">{{index+1}}、【温馨提示】下单提前预定，接单后联系车主确认行程，避免耽误您的出发时间</text>
			</view>
		</view>
		<view class="fixed-bottom" v-if="isShow&&!isOk">
			<view class="police" @click="callPolice">
				<image src="/static/images/my.png" />
				<text>一键报警</text>
			</view>
			<button @click="goPay">支付车费<text>({{currentOrder.totalPrice}})</text></button>
		</view>
	</template>
</template>

<style lang="scss" scoped>
	@import "../../styles/_rpx.scss";

	.state {
		display: flex;
		flex-direction: column;
		gap: 10px;
		height: rpx(132);
		color: #fbffff;
		margin-bottom: rpx(12);
		background-color: #03bf5f;
		border-bottom-left-radius: rpx(10);
		border-bottom-right-radius: rpx(10);

		.title {
			display: flex;
			margin-top: rpx(15);
			justify-content: space-between;

			text {
				font-size: rpx(16);
			}

			.part {
				display: flex;

				.isPay {
					font-size: rpx(12);
					margin: rpx(5) rpx(5) 0 0;
				}

				.mark {
					margin: rpx(5) 0 0 0;
					font-size: rpx(12);
				}

				.money {
					margin: auto rpx(15) auto 0;
					font-size: rpx(16);
				}
			}


		}

		.system {
			font-size: rpx(12);
		}

		.tips {
			display: flex;
			width: rpx(347);
			height: rpx(50);
			margin: 0 auto;
			font-size: rpx(10);
			border-radius: rpx(5);
			color: #ea9641;
			background-color: #ffffff;

			.tip {
				display: flex;
				margin-left: rpx(12);
			}

			image {
				width: rpx(35) !important;
				height: rpx(35) !important;
				margin: auto 0 auto rpx(12);
			}

			.driverCar {
				display: flex;
				flex-direction: column;
				margin: auto 0;
				gap: rpx(10);
			}
		}

		.cab {
			line-height: rpx(50);
		}

		text {
			margin-left: rpx(15);
		}
	}

	.driverMessage {
		display: flex;
		flex-direction: column;
		gap: rpx(12);
		font-size: rpx(10);
		width: rpx(346);
		height: rpx(100);
		margin: 0 auto rpx(8) auto;
		border-radius: rpx(10);
		background-color: #ffffff;

		.driverMes {
			display: flex;
			justify-content: space-between;
			margin: rpx(15) 0 0 rpx(15);

			.msg {
				display: flex;
				color: #9ba3a9;



				view {
					display: flex;
					flex-direction: column;
					gap: rpx(8);
				}
			}

			image {
				width: rpx(35) !important;
				height: rpx(35) !important;
				margin-right: rpx(8);
			}

			.phone {
				margin-right: rpx(17);
			}
		}

		.location {
			display: flex;
			justify-content: space-between;
			margin-left: rpx(15);

			text {
				margin: auto rpx(15) auto 0;
				color: #e67860;
			}
		}
	}

	.detail {
		display: flex;
		flex-direction: column;
		gap: rpx(12);
		width: rpx(346);
		height: rpx(150);
		margin: 0 auto rpx(8) auto;
		border-radius: rpx(10);
		background-color: #ffffff;

		.time {
			margin-top: 10px;
		}

		.distance {
			my-imagetext:first-child {
				margin-bottom: rpx(15);
			}
		}

		.handle {
			display: flex;
			justify-content: flex-end;
			margin-right: rpx(15);

			.cancel {
				margin-right: rpx(20);
				color: #a4a9af;
			}
		}

		my-imagetext {
			font-size: rpx(10);
			display: flex;
			margin-left: rpx(15);
		}
	}

	.know {
		width: rpx(346);
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border-radius: rpx(10);
		font-size: rpx(12);
		background-color: #ffffff;

		.caption {
			font-size: rpx(14);
			font-weight: bold;
			margin: rpx(22) 0 rpx(20) rpx(15);
		}

		.content {
			width: rpx(320);
			margin: 0 0 rpx(5) rpx(15);
		}
	}

	.fixed-bottom {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: rpx(70);
		background-color: #ffffff;
		color: white;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		z-index: 9999;
		/* 适配iPhoneX等有底部安全区域的设备 */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.police {
			margin: auto rpx(35);

			image {
				width: rpx(17) !important;
				height: rpx(17) !important;
				margin: 0 auto rpx(5) auto;
			}

			display: grid;
			flex-direction: column;
			height: rpx(42);
			font-size: rpx(10);
			color: black;
			font-weight: bold;
		}

		button {
			display: flex;
			width: rpx(243);
			height: rpx(42);
			justify-content: center;
			line-height: rpx(42);
			margin: auto 0;
			font-size: rpx(14);
			color: white;
			background-color: #52c582;
		}
	}

	.orderDetail {
		padding-bottom: rpx(75);
	}

	.divider {
		width: rpx(325);
		height: rpx(1);
		min-height: 1rpx;
		background-color: #f4f4f4;
		margin: 0 auto;
	}

	.driverName {
		color: black;
		font-weight: bold;
		font-size: rpx(11);
	}

	.driver {
		color: #9ba3a9;
	}
</style>